<template>
    <div class="bodybox">
        <!-- 导航栏 -->
        <van-nav-bar title="实训云平台" :placeholder="true" :fixed="true" />
        <!-- 用户资料卡片 -->
        <div class="user-container display_box">
            <div class="user_avatar">
                <van-uploader style="width:100%" :max-size="500 * 1024" :max-count="1" :after-read="afterRead">
                    <van-image cover round width="5rem" height="5rem" :src="avatar" />
                </van-uploader>
            </div>
            <div class="user_information">
                <h3>欢迎，{{ this.$store.state.user.userNick }}</h3>
            </div>
        </div>
        <!-- 功能列表卡片 -->
        <div class="function_list display_box">
            <van-cell-group title="">
                <van-cell title="修改密码" is-link @click="intoChangePwd" />
            </van-cell-group>
            <van-cell-group title="">
                <van-cell title="关于我们" is-link to="/about"/>
            </van-cell-group>
            <van-cell-group title="">
                <van-cell title="退出登录" is-link @click="outLogin" />
            </van-cell-group>

            <van-dialog v-model="showDialog" title="修改密码" show-cancel-button :before-close="beforeClose"
                confirmButtonColor="#1989fa">
                <van-field v-model="oldPwd" name="oldPwd" label="旧密码" placeholder="旧密码"
                    :rules="[{ required: true, message: '请填写旧密码' }]" />
                <van-field v-model="newPwd" name="oldPwd" label="新密码" placeholder="新密码"
                    :rules="[{ required: true, message: '请填写新密码' }]" />
            </van-dialog>

        </div>
         <!-- 加载动画 -->
         <loading v-if="loadingStatus"></loading>
    </div>
</template>
<script>
import req from '../../request/request'
import { getImg, uploadFile } from '@/request/MyFileReq';
import { Toast } from 'vant';
export default {
    name: 'HomePerson',
    data() {
        return {
            avatar: 'https://img01.yzcdn.cn/vant/cat.jpeg',
            oldPwd:'',
            newPwd:'',
            showDialog:false,
            
            // 加载动画
            loadingStatus: true,
        };
    },
    methods: {
        intoChangePwd(){
            this.showDialog = true;
        },
        beforeClose(res, next) {
            if (res == "confirm") {
                // console.log(this.oldPwd)
                // console.log(this.newPwd)
                req({
                    url:"ChangePwd",
                    method:"POST",
                    data:{
                        id:this.$store.state.user.id,
                    }
                }).then(res=>{
                    // console.log(res);
                    Toast("修改成功")
                    this.outLogin();
                })
                this.showDialog = false;
            } else {
                this.showDialog = false;
            }
            next();
        },

        outLogin() {
            this.$store.state.user = null;
            this.$store.state.token = null;
            localStorage.removeItem("mytoken");
            localStorage.removeItem("user01");
            Toast("退出成功！")
            this.$router.replace("/");

        },
        afterRead(file) {
            var that = this;
            var data = new FormData();
            data.append("file", file.file);
            data.append("id", this.$store.state.user.id);
            uploadFile("/api/changeUserAvatar", data, function (e) {
                // console.log(e);
                this.getImg('/api/getImg?url=' + this.$store.state.user.userAvatar).then(res => {
                    that.avatar = res;
                })
            })
        },


    },
    computed: {
    },
    mounted() {
        
        if (this.$store.state.user.userAvatar != null) {
            var that = this;
            getImg('/api/getImg?url=' + this.$store.state.user.userAvatar).then(res => {
                that.avatar = res;
            })
        }
        setTimeout(async () => {
            this.loadingStatus = false;
        }, 500);
    },
}
</script>
<style>
.user-container {
    width: 90%;
    height: 20vh;
    background-color: #efefef;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    align-items: center;
    margin: 10px auto;
}

/* 卡片盒公共样式 */
.display_box {
    border-radius: 20px;
    width: 90%;

}

.user_information {
    width: 55%;
}

.function_list {
    margin: 10px auto;
}

.bodybox {
    width: 100%;
    height: 94vh;

}
</style>